<template>
  <el-card
    class="steam-statistics work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px; overflow: hidden;"
  >
    <div class="steam-statistics__header work-bench-team__card__header">
      <span class="work-bench-team__card__title steam-statistics__title">蒸汽统计</span>
    </div>
    <div class="work-bench-team__card__body steam-statistics__body">
      <div class="steam-statistics--left">
        <div>今日产生 (t)</div>
        <div class="steam-statistics__total">{{ total }}</div>
      </div>
      <div class="steam-statistics--right">
        <div ref="steamStatisticsPie" class="steam-statistics__pie">暂无数据...</div>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //
import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import { drewPie } from './pie'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SteamStatistics',
  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },
  data() {
    return {
      total: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamSpecialPie({
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        const first = (res.info || [])[0] || {}
        const firstHead = (first.head || [])[0] || {}
        this.total = firstHead.value
        drewPie('solid', this.$refs.steamStatisticsPie,
          (first.infoList || []).map((i) => {
            return {
              name: i.label,
              value: i.value,
            }
          }),
        )
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
